<template>
	<view class="pb-content-box">
		<view class="date-item-box">
			<view class="select-date">
				{{selectYear}}
				<image class="select-date-icon" src="../../../static/icon_open.png" mode="aspectFill"></image>
			</view>
			<view class="week-box">
				<image @click="qianClick()" class="week-icon" src="../../../static/icon_qian.png" mode="aspectFill"></image>
				<text class="week-text">{{startMonth}}-{{dateDatas[0]}}至{{endMonth}}-{{dateDatas[6]}}</text>
				<image @click="houClick()" class="week-icon" src="../../../static/icon_hou.png" mode="aspectFill"></image>
			</view>
			<view class="submit-btn">发布</view>
		</view>
		<!-- 表头 -->
		<view class="table-header">
			<view class="table-header-left">排班表未发布</view>
			<view class="table-header-right">
				<view class="table-header-week">
					<view class="table-header-date-item" v-for="week in weekDatas">{{week}}</view>
				</view>
				<view class="table-header-date">
					<view class="table-header-date-item" :class="(index==5 || index==6)&&'red1'" v-for="(date,index) in dateDatas">{{date}}</view>
				</view>
			</view>
		</view>
		<!-- 表格体 -->
		<view class="table-body">
			<view class="table-body-item-box" v-for="(pbItem, cIndex) in pbDatas">
				<view class="table-body-item1">
					{{pbItem.name}}
				</view>
				<view :class="selectIndex==cIndex+''+index && 'b-select'" @click="onWorkClick(cIndex, index)" class="table-body-item"
				 v-for="(work,index) in weekDatas">
					{{pbItem.works[index]}}
				</view>
			</view>
		</view>

		<view class="footer-box">
			<view class="footer-item-box">
				<view class="item">
					<image class="img" src="../../../static/icon_qiwang.png" mode="aspectFill"></image>
					<view class="text">
						期望排班
					</view>
				</view>
				<view class="item" @click="delClick()">
					<image class="img" src="../../../static/icon_shanchu.png" mode="aspectFill"></image>
					<view class="text">
						删除排班
					</view>
				</view>
			</view>

			<view class="pb-item-box">
				<view @click="onWorkTypeClick(work)" class="pb-item" v-for="work in workText">
					{{work}}
				</view>
				<view class="pb-item blue-color">
					新增
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDayArr7
	} from "../../../common/dateUtil.js"
	
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'

	let setUp = -7 // 日期步进值
	export default {
		components:{
		   RenCalendar
		},
		data() {
			return {
				weekDatas: ["一", "二", "三", "四", "五", "六", "日"],
				dateDatas: getDayArr7(setUp).days,
				startMonth: getDayArr7(setUp).startMonth,
				endMonth: getDayArr7(setUp).endMonth,
				pbDatas: [{
					name: "曾华桥",
					works: ['', '', '', '', '', '', '']
				}, {
					name: "测试1",
					works: ['', '', '', '', '', '', '']
				}],
				selectIndex: "", // 当前选中的表格
				workText: ["白班", "夜班", "休息", "行政"],
				selectYear: new Date().getFullYear() + "年"
			}
		},
		onLoad() {


		},
		onReady() {

		},

		methods: {
			onWorkClick(cIndex, index) {
				this.selectIndex = `${cIndex}${index}`
			},
			// 设置排班
			onWorkTypeClick(item) {
				if (!this.selectIndex) {
					this.showToast('请先选中单元格')
					return;
				}
				// 获取当前单元格
				let indexArr = this.selectIndex.split("");
				let index1 = indexArr[0];
				let index2 = indexArr[1];
				this.$set(this.pbDatas[index1]["works"], index2, item)

				// 选中下一格
				if (parseInt(index2) >= 6) {
					if (this.pbDatas.length - 1 > index1) {
						// 可以换行就换行
						index1++;
						index2 = 0;
					} else {
						this.showToast('添加完毕')
						// 不能换行就返回
						return
					}
				} else {
					index2++
				}
				this.selectIndex = `${index1}${index2}`;
			},
			// 删除排班
			delClick() {
				let indexArr = this.selectIndex.split("");
				let index1 = indexArr[0];
				let index2 = indexArr[1];
				this.$set(this.pbDatas[index1]["works"], index2, "");
			},
			qianClick() {
				setUp = setUp + 7;
				this.dateDatas = getDayArr7(setUp).days
				this.startMonth = getDayArr7(setUp).startMonth
				this.endMonth = getDayArr7(setUp).endMonth
			},
			houClick() {
				setUp = setUp - 7;
				this.dateDatas = getDayArr7(setUp).days
				this.startMonth = getDayArr7(setUp).startMonth
				this.endMonth = getDayArr7(setUp).endMonth
			},
			showToast(text) {
				uni.showToast({
					title: text,
					duration: 2000,
					icon: "none"
				});
			}
		}
	}
</script>

<style scoped>
	view {
		box-sizing: border-box;
	}

	page {
		background: #C0C0C0;
		overflow-x: hidden;
	}

	.table-header {
		width: 100%;
		height: 140rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
		display: flex;
		background-color: #FFFFFF;
	}

	.table-header-left {
		display: flex;
		width: 100rpx;
		height: 100%;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		padding: 0rpx 10rpx;
		color: #999999;
		background-color: #ececec;
	}

	.table-header-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.table-header-week {
		flex: 1;
		display: flex;
		color: #888888;
	}

	.table-header-date {
		flex: 1;
		display: flex;
	}

	.table-header-date-item {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.red1 {
		color: #CE3C39;
	}

	.b-select {
		border: #007AFF solid 1rpx !important;
	}

	.table-body {
		background-color: #FFFFFF;
	}

	.table-body-item-box {
		display: flex;
		height: 100rpx;
	}

	.table-body-item1 {
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ececec;
		color: #999999;
		border-bottom: solid 1rpx #CCCCCC;
	}

	.table-body-item {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		border-right: solid 2rpx #DDDDDD;
		border-bottom: solid 2rpx #DDDDDD;
	}

	.footer-box {
		position: fixed;
		width: 100%;
		height: 240rpx;
		bottom: 0rpx;
		left: 0rpx;
		background-color: #FFFFFF;
	}

	.footer-item-box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		border: 2rpx solid #DDDDDD;
	}

	.footer-item-box>.item {
		width: 140rpx;
		height: 100%;
		flex-direction: column;
		padding-left: 20rpx;
		padding-right: 20rpx;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.footer-item-box>.item>.img {
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin: 0 auto;
	}

	.footer-item-box>.item>.text {
		font-size: 18rpx;
		text-align: center;
	}

	.pb-item-box {
		padding: 10rpx;
	}

	.pb-item-box>.pb-item {
		padding: 4rpx 26rpx;
		border: solid 2rpx #DDDDDD;
		border-radius: 4rpx;
		display: inline-block;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.pb-item-box>.blue-color {
		color: #0A98D5;
	}

	.date-item-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		background-color: #FFFFFF;
		position: relative;
	}

	.submit-btn {
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		position: absolute;
		right: 0rpx;
		top: 15rpx;
		background-color: #1989FA;
		color: #FFFFFF;
		font-size: 24rpx;
		border-top-left-radius: 24rpx;
		border-bottom-left-radius: 24rpx;
	}

	.week-icon {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.week-text {
		display: inline-block;
		vertical-align: middle;
		margin: 0 10rpx;
	}

	.select-date {
		width: 160rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.select-date-icon{
		width: 40rpx;
		height: 40rpx;
	}
</style>
